<template>
  <!-- Main content -->
  <section class='content'>
    <!-- Info boxes -->
    <!-- /.row -->
    <div class='row'>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-primary'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-bullhorn'></i>&nbsp;&nbsp;待办事项</h5>
          </div>
          <div class="ibox-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待办事项" name="handleView">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; ">
                  <!-- style="position: relative; overflow: hidden; width: auto;" -->
                  <ul class="todo-list small-list" id="taskmenuUl" style="overflow: hidden; width: auto;">
                    <li v-for="item in handle" :key='item.id'>
                      <router-link to="/approvals">
                        <i class="fa fa-circle-o"></i>
                        <span class="m-l-xs">
                          {{ getHandleTitle(item) }}
                        </span>
                      </router-link>
                    </li>
                    <li>
                      <router-link v-if="showHandleMore" to="/approvals">
                        <span class="m-l-xs">查看更多...</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的申请" name="submitView">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; ">
                  <ul class="todo-list small-list" id="taskmenuUl" style="overflow: hidden; width: auto;">
                    <li v-for="item in submit" :key='item.id'>
                      <router-link to="/submits">
                        <i class="fa fa-circle-o"></i>
                        <span class="m-l-xs">
                          {{ getSubmitTitle(item) }}
                        </span>
                      </router-link>
                    </li>
                    <li>
                      <router-link v-if="showHandleMore" to="/submits">
                        <!-- <i class="fa fa-circle-o"></i> -->
                        <span class="m-l-xs">查看更多...</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-success'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ degreeTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='degreeChart'></canvas>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->

    <!-- Main row -->
    <div class='row'>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-primary'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ ageTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='ageChart'></canvas>
          </div>
        </div>
      </div>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-success'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ profTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='profChart'></canvas>
          </div>
        </div>
      </div>

    </div>
  </section>
  <!-- /.content -->
</template>

<script>
import Chart from 'chart.js'
import $ from 'jquery'
import Utils from '../../common/utils'
let util= new Utils()
export default {
  name: 'Dashboard',
  components: {
  },
  data() {
    return {
      activeName: 'handleView',
      ageTitle: '年龄区间',
      degreeTitle: '学历统计',
      profTitle: '专业技术职称',
      graph:[],
      handle:[],
      submit:[],
      showHandleMore:false,
      showSubMitMore:false
    }
  },
  methods: {
    getDashData(){
      var that = this
      util.getDashData((response)=>{
        that.graph = response.body.body.graph
        that.handle = response.body.body.handle
        if(that.handle.length > 10){
          that.handle = that.handle.slice(0,10)
          that.showHandleMore = true
        }
        that.submit = response.body.body.submit
        if(that.submit.length > 10){
          that.submit = that.submit.slice(0,10)
          that.showSubMitMore = true
        }
        that.showGraph()
      },(response)=>{
        that.showErrorInfo('加载数据失败,请刷新!')
      })
    },
    showSucInfo(info){
      this.$message({
        message: info,
        type: 'info'
      });
    },
    showErrorInfo(info){
      this.$message({
        message: info,
        type: 'error'
      });
    },
    getHandleTitle(item){
      return util.date2str(new Date(item.createTime*1000),"yyyy-MM-dd hh:mm")+' -- 【'+item.creatorName +'】'+'提交【'
                    + this.getTypeInfo(item.type)+'】 需要您审核'
    },
    getSubmitTitle(item){
      return '【您】在'+util.date2str(new Date(item.createTime*1000),"yyyy-MM-dd hh:mm")+
              '提交给【'+item.approverName+'】的【'+this.getTypeInfo(item.type)+'】申请'+ this.getStatInfo(item)
    },
    getStatInfo(item){
      switch(item.state){
        case 0:
          return '正在【审核中】'
        case 1:
          return '已经【审核通过】'
        case 2:
          return '已被【拒绝】'
      }
    },
    getTypeInfo(type){
      switch(type){
        case 0:
          return '新增用户'
        case 1:
          return '修改用户信息'
        case 2:
          return '删除用户'
      }
    },
    getChartType(type) {
      if (type == 1) {
        return 'bar'
      }
      if (type == 2) {
        return 'pie'
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    setTitle(index, name) {
      if (index == 0) {
        this.ageTitle = name
      }
      if (index == 1) {
        this.degreeTitle = name
      }
      if (index == 2) {
        this.profTitle = name
      }
    },
    parseGraph() {
      var graph = this.graph
      var chartDataArray = []
      for (var index in graph) {
        var item1 = graph[index]
        this.setTitle(index, item1.name)
        var chartData = {
          name: item1.name,
          type: this.getChartType(item1.type),
          cols: [],
          data: []
        }
        chartData.cols = Object.keys(item1.data)
        for (var propIndex in chartData.cols) {
          chartData.data.push(item1.data[chartData.cols[propIndex]])
        }
        chartDataArray.push(chartData)
      }
      return chartDataArray
    },
    showGraph(){
      var graph = this.graph
      var ageChart = document.getElementById('ageChart').getContext('2d')
      var degreeChart = document.getElementById('degreeChart').getContext('2d')
      var profChart = document.getElementById('profChart').getContext('2d')

      var charts = [ageChart, degreeChart, profChart]

      var chartOptions = {
        responsive: true,
        maintainAspectRatio: !this.isMobile,
        legend: {
          position: 'bottom',
          display: true
        }
      }

      var barChartOption = {
        responsive: true,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        legend: {
          position: 'bottom',
          display: true
        }
      }

      var chartIds = ['ageChart', 'degreeChart', 'profChart']
      var graphData = this.parseGraph()
      for (var index in graphData) {
        var chartData = graphData[index]

        var option = chartOptions
        if (chartData.type == 'bar') {
          option = barChartOption
        }
        var config = {
          type: chartData.type,
          data: {
            labels: chartData.cols,
            datasets: [{
              label: chartData.name,
              data: chartData.data,
              backgroundColor: ['#00a65a', '#dd4b39', '#f39c12', '#00c0ef'],
              hoverBackgroundColor: ['#00a65a', '#dd4b39', '#f39c12', '#00c0ef']
            }]
          },
          options: option
        }
        new Chart(charts[index], config) // eslint-disable-line no-new
      }
    }
  },
  computed: {
    isMobile() {
      return (window.innerWidth <= 800 && window.innerHeight <= 600)
    }
  },
  created(){

  },
  mounted() {
    this.getDashData()
  }
}
</script>
<style>
.info-box {
  cursor: pointer;
}

.info-box-content {
  text-align: center;
  vertical-align: middle;
  display: inherit;
}

.fullCanvas {
  width: 100%;
}
</style>
